<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		.banner{position: relative;width: 380px;}
		ol{list-style: none;}
		.page{display: flex;justify-content: space-between;width: 380px;position: absolute;bottom:5px;}
		.page li{width: 20px;text-align:center ;border-radius: 50%;border: #4682BF 1px solid;}
		.active{background: red;}
	</style>
</head>
<body>
		<div class="banner">
			<img src="img/1.jpg" >
			<ol class="page">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ol>
		</div>
		
		<script type="text/javascript">
			let pic=document.querySelector('img')
			let lis=document.querySelectorAll('li')
			let imgurls=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg']
			let num = 0;
			//初始设置
			pic.src=imgurls[num];
			lis[num].className="active"
			
			//自动播放
			setInterval(function(){
				num++
				if(num>3){
					num=1;
					pic.src=imgurls[num]
					for(var i = 0;i<imgurls.length;i++){
						lis[i].className=""
					}
					lis[num].className="active"
				}else{
					pic.src=imgurls[num]
					for(var j=0;j<imgurls.length;j++){
						lis[j].className=""
					}
					lis[num].className="active"
				}
			},5000)
			//设置点击的操作
			for(var k=0;k<lis.length;k++){
				lis[k].index=k;
				lis[k].onclick=function(){
					pic.src=imgurls[this.index]
					for(var m =0;m<lis.length;m++){
						lis[m].className=""
					}
					lis[this.index].className="active"
				}
			}
		</script>
</body>
</html>